<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style type="text/css">
    label{margin-left: 30px;}
    .detail{
        z-index: 19891015;
        /*width: 360px;*/
        height: 50%;
        display: none;
        /*margin-left: -66%;*/
        border: 1px solid #666;
        /*border-radius: 0.5;*/
        box-shadow: 1px 1px 50px rgb(0 0 0 / 30%) !important;
    }
    #loading {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/assets/img/loading.gif) no-repeat center;
        z-index: 9999;
        text-align: center;
        display: none
    }
    #loading img {
        position: absolute;
        top: 30%
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        请求统计数据
        <a href="javascript:history.go(-1);" class="btn btn-success" title="返回上一级" >返回上一级</a>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
                <div class="content" style="background:#f1f4f6;">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="row">
                                <div class="col-xs-4" style="margin-bottom:15px;">
                                    <div class="panel panel-default panel-intro panel-statistics">
                                        <div class="panel-body">
                                            <h3>当日总数</h3>
                                            <h4>{$logtotals.total}</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="margin-bottom:15px;">
                                    <div class="panel panel-default panel-intro panel-statistics">
                                        <div class="panel-body">
                                            <h3>成功总数</h3>
                                            <h4>{$logtotals.succ}</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="margin-bottom:15px;">
                                    <div class="panel panel-default panel-intro panel-statistics">
                                        <div class="panel-body">
                                            <h3>失败总数</h3>
                                            <h4>{$logtotals.fail}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12 col-sm-12">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-8 col-xs-12" id="choise">
                                            URI类型
                                            <label><input id="row[defaultpaytype]-wechat" name="type" type="radio" value="1" checked=""> GETJOB</label>
                                            <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="2" > GETREAP</label>
                                            <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="3">GETREAP-DEVICE</label>
                                            <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="4" > GETCREATE</label>
                                            <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="5" > UPDATEJOB</label>
                                            <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="6" > QUICK-SORT</label>
                                            <label><input id="row[defaultpaytype]-balance" name="type" type="radio" value="7" > GETDSP</label>
                                        </div>
                                    </div>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr>
                                            {foreach name="logtotals.column" item="vo"}
                                            <th class="text-center">{$vo}</th>
                                            {/foreach}
                                        </tr>
                                        </thead>
                                        <tbody id="tbodys">
                                            {foreach name="logtotals.data" item="vo"}
                                            <tr>
                                                <td><h5 class="text-center">{$vo.total}</h5></td>
                                                <td><h5 class="text-center">{$vo.status}</h5></td>
                                                <td><h5 class="text-center">{$vo.info}</h5></td>
                                            </tr>
                                            {/foreach}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12 col-sm-12">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body" id="form1">
                                    <h4 style="font-weight:bold;color: #060606;">历史数据</h4>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:360px;" >
                                    </div>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr>
                                            {foreach name="logs.column" item="vo"}
                                            <th class="text-center">{$vo}</th>
                                            {/foreach}
                                            <th class="text-center">详情</th>
                                        </tr>
                                        </thead>
                                        <tbody id="datetbody">
                                            {foreach name="logs.data" item="vo"}
                                            <tr>
                                                <td>{$vo.date}</td>
                                                <td><h5 class="text-center">{$vo.uri}</h5></td>
                                                <td><h5 class="text-center">{$vo.total}</h5></td>
                                                <td><h5 class="text-center">{$vo.succ}</h5></td>
                                                <td><h5 class="text-center">{$vo.fail}</h5></td>
                                                <td><h5 class="text-center">{$vo.created_at}</h5></td>
                                                <td>
                                                    <h5 class="text-center">
                                                        <button type="button" id="faupload-image" class="btn btn-success details" ><i class="fa fa-list-ul"></i> 查看详情</button>
                                                    </h5>
                                                    <div class="detail">
                                                        <table class="table" style="width:100%">
                                                            <thead>
                                                            <tr>
                                                                <th class="text-center">总数</th>
                                                                <th class="text-center">状态</th>
                                                                <th class="text-center">备注</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                                {foreach name="vo.info" item="vos"}
                                                                <tr>
                                                                    <td><h5 class="text-center">{$vos.total}</h5></td>
                                                                    <td><h5 class="text-center">{$vos.status}</h5></td>
                                                                    <td><h5 class="text-center">{$vos.info}</h5></td>
                                                                </tr>
                                                                {/foreach}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                            {/foreach}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
        </div>
    </div>
</div>
<div id="loading" style="display: none;"></div>
<script type="text/javascript">
    $('.details').click(function(){
        let disp = $(this).parent().next().css('display');
        if (disp == 'block') {
            $(this).parent().next().css('display','none');
        } else{
            $(this).parent().next().css('display','block');
        };
    })
    $('#choise input[name="type"]').change(function(){
        $('#loading').show();
        $.ajax({
            type: "GET",
            url: '{:url("admin/DataOverview/statistics")}?type='+this.value,
            dataType: "json", //声明成功使用json数据类型回调
            success: function(res) {
                let data = res.data;
                let html="";
                $('#tbodys').empty();
                for (var i = 0; i < data.length; i++) {
                    html+= '<tr><td><h5 class="text-center">'+data[i].total+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].status+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].info+'</h5></td>';
                    html+=     '</tr>';
                };
                $('#loading').hide();
                $('#tbodys').append(html);
            },
        });
    })
    $('#form1 .datetimerange').daterangepicker({
        timePicker: true,
        // startDate: moment().startOf('hour'),
        // endDate: moment().startOf('hour').add(168, 'hour'),
        locale: {
          format: 'YYYY-MM-DD hh:mm:ss A'
        }
    }, function(start, end, label) {
        // console.log("A new date selection was made: " + start.format('YYYY-MM-DD hh:mm:ss') + ' to ' + end.format('YYYY-MM-DD hh:mm:ss'));
        let starts = start.format('YYYY-MM-DD');
        let ends = end.format('YYYY-MM-DD');
        console.log(starts);
        $('#loading').show();
        $.ajax({
            type: "GET",
            url: '{:url("admin/DataOverview/logs_total")}?start='+starts+'&end='+ends,
            dataType: "json", //声明成功使用json数据类型回调
            success: function(res) {
                console.log(res);
                let data = res.data;
                let html="";
                $('#datetbody').empty();
                for (var i = 0; i < data.length; i++) {
                    html+= '<tr><td><h5 class="text-center">'+data[i].date+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].uri+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].succ+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].fail+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].created_at+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].info+'</h5></td>';
                    html+=     '</tr>';
                };
                $('#loading').hide();
                $('#datetbody').append(html);
            },
        });
    });
</script>